<template>
  <div>
       <div class="app">
      <div class="head">
    成为会员
        <span class="arrow" @click="Jump_path"></span>
       
      </div>
    </div>
    <div id="app-root">
      <div class="page-mine-vip-intro">
        <div class="header">
          <div class="container">
            <img
              class="hero"
              src="http://im05.nanyibang.com/mall/static/intro/vip_0.png"
              alt=""
            />
            <div class="btn-area">
              <div class="black-btn">立即加入会员</div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="top">
            <div class="left">
              <img
                class="card-line"
                src=""
                alt=""
              />
              <div>01.&nbsp;会员权益</div>
              <img
                class="card-line"
                src=""
                alt=""
              />
            </div>
            <div class="right">会员专享</div>
          </div>
          <div class="center">
            <div class="title">穿衣顾问</div>
            <p>
              专门为男士提供的穿衣搭配咨询服务，全年一对一穿搭指导，让你更懂得如何穿衣搭配。
            </p>
            <img
              src="http://im05.nanyibang.com/mall/static/intro/adviser_2.png"
              class="comp-lazy-img visible center-img"
            />
            <p>
              男衣邦所有的搭配师都是服装相关专业的时尚达人、博主、编辑等，具有多年男装设计和造型搭配经验，为您提供专业的搭配咨询服务。
            </p>
          </div>
          <div class="bottom"><div class="black-btn">了解穿衣顾问</div></div>
        </div>
        <div class="card">
          <div class="top">
            <div class="left">
              <img
                class="card-line"
                src=""
                alt=""
              />
              <div>02.&nbsp;会员权益</div>
              <img
                class="card-line"
                src=""
                alt=""
              />
            </div>
            <div class="right">会员专享</div>
          </div>
          <div class="center">
            <div class="title">优惠券&amp;会员价</div>
            <p>
              加入会员立即获得五张总价值200元的优惠券，购买商城套装可以使用。
            </p>
            <img
              src=""
              class="comp-lazy-img not-visible center-img"
            />
          </div>
        </div>

        <div class="footer">
          <span class="tip"
            ><b>会员年费:</b>&nbsp;<span class="default_coupon"
              ><s>&nbsp;¥199&nbsp;</s>&nbsp;¥99</span
            ></span
          ><span class="buy" @click="getshow">立即加入会员</span>
        </div>
        
      </div>
    </div>
    <van-dialog v-model="show" title="是否购买" show-cancel-button @confirm="onconfirm">
</van-dialog>
  </div>
</template>
<script>
export default {
    data() {
        return {
                show: false,
        }
    },
    methods: {
        Jump_path() {
      this.$router.go(-1);
    },
    getshow(){
        this.show=true
    },
    onconfirm(){
        
        this.$router.push({name:'my'})
          let hylist = window.localStorage.getItem("hylist");
          hylist = JSON.parse(hylist);
       hylist=[true]
            hylist = JSON.stringify(hylist);
      window.localStorage.setItem("hylist", hylist);
console.log(hylist);
    }
    },
created() {
     if (window.localStorage.getItem("hylist") == null) {
      window.localStorage.setItem("hylist", "[]");
    }
},
}
</script>
<style scoped>
.head {
  position: fixed;
  top: 0;
  left: 0%;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
  color: rgb(59, 59, 59);
  z-index: 999;
  background: #fff;
}
.arrow {
  display: block;
  width: 12px;
  height: 23px;
  position: absolute;
  top: 15px;
  left: 20px;
  z-index: 999;
  background: url(../../public/assets/images/ic_arrow_home.png);
  transform: rotate(180deg);
}
.app-root{
    margin-top: 50px;
}
.page-mine-vip-intro {
    background-color: #f0f0f0;
    padding-bottom: 50px;
}
.page-mine-vip-intro .header {
    margin-bottom: -20px;
}
.page-mine-vip-intro .header .container {
    position: relative;
}
.page-mine-vip-intro .header .container .hero {
    width: 100%;
}
img {
    pointer-events: none;
}
.page-mine-vip-intro .header .container .btn-area {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 27%;
    width: 100%;
}
.page-mine-vip-intro .black-btn {
    height: 44px;
    border-radius: 22px;
    line-height: 44px;
    padding: 0 50px;
    color: #fff;
    font-size: 17px;
    text-align: center;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);
    background-color: #1f1f1f;
    background-image: url("https://wx.nanyibang.com/mall/asset/intro-black-btn-bg-836f852d.png");
    background-size: cover;
    background-position: 50%;
}
.page-mine-vip-intro .card {
    width: 89.3333333333%;
    min-height: 200px;
    margin: 0 auto 30px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.page-mine-vip-intro .card .top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}
.page-mine-vip-intro .card .top .left {
    font-size: 20px;
    color: #000c18;
    line-height: 28px;
    padding-left: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.page-mine-vip-intro .card .top .left .card-line {
    height: 20px;
}
.page-mine-vip-intro .card .top .right {
    font-size: 14px;
    color: #000c18;
    background-color: #f4c894;
    padding: 0 14px;
    line-height: 34px;
}
.page-mine-vip-intro .card .center .title {
    font-size: 24px;
    color: #000c18;
    text-align: center;
    margin: 30px 0 20px;
}
.page-mine-vip-intro .card .center p {
    font-size: 15px;
    line-height: 23px;
    margin: 12px 24px;
    color: #595c61;
}
.page-mine-vip-intro .card .center .center-img {
    width: 100%;
}
.page-mine-vip-intro .card .bottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.page-mine-vip-intro .card .bottom .black-btn {
    margin: 30px 0;
}

.page-mine-vip-intro .black-btn {
    height: 44px;
    border-radius: 22px;
    line-height: 44px;
    padding: 0 50px;
    color: #fff;
    font-size: 17px;
    text-align: center;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);
    background-color: #1f1f1f;
    background-image: url("https://wx.nanyibang.com/mall/asset/intro-black-btn-bg-836f852d.png");
    background-size: cover;
    background-position: 50%;
}
.page-mine-vip-intro .card {
    width: 89.3333333333%;
    min-height: 200px;
    margin: 0 auto 30px;
    background-color: #fff;
    border-radius: 5px;
    overflow: hidden;
}
.page-mine-vip-intro .card .top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}
.page-mine-vip-intro .card .top .left {
    font-size: 20px;
    color: #000c18;
    line-height: 28px;
    padding-left: 4px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.page-mine-vip-intro .card .top .right {
    font-size: 14px;
    color: #000c18;
    background-color: #f4c894;
    padding: 0 14px;
    line-height: 34px;
}
.page-mine-vip-intro .card .center .title {
    font-size: 24px;
    color: #000c18;
    text-align: center;
    margin: 30px 0 20px;
}
.page-mine-vip-intro .card .center p {
    font-size: 15px;
    line-height: 23px;
    margin: 12px 24px;
    color: #595c61;
}
.page-mine-vip-intro .card .center .center-img {
    width: 100%;
}
.page-mine-vip-intro .questions {
    display: block;
    text-align: center;
    margin: 30px 0;
    color: #5a75d6;
    font-size: 13px;
}

a {
    text-decoration: none;
}
.page-mine-vip-intro .footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 768px;
    margin: 0 auto;
    background-color: #fff;
    padding-bottom: env(safe-area-inset-bottom);
    font-size: 0;
}
.page-mine-vip-intro .footer .tip {
    display: inline-block;
    width: 67%;
    font-size: 16px;
    height: 49px;
    line-height: 49px;
    text-align: center;
    color: #000c18;
    background-color: #fff;
    position: relative;
}
.page-mine-vip-intro .footer .tip:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    border: solid #e5e5e5;
    border-width: 0.5px 0 0;
}
.page-mine-vip-intro .footer .tip .default_coupon {
    position: relative;
}
.page-mine-vip-intro .footer .tip s {
    font-size: 15px;
    color: #595c61;
}
.page-mine-vip-intro .footer .tip .default_coupon:after {
    position: absolute;
    right: 20px;
    height: 20px;
    width: 126px;
    top: -20px;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    padding: 0 8px;
    border-radius: 10px 10px 0 10px;
    box-shadow: 0 4px 4px -2px rgb(0 0 0 / 10%);
    background: linear-gradient(90deg,#fd8e31,#fea53f);
    content: "限时优惠";
}
.page-mine-vip-intro .footer .buy {
    display: inline-block;
    width: 33%;
    background-color: #f0251f;
    color: #fff;
    font-size: 16px;
    height: 49px;
    line-height: 49px;
    text-align: center;
    vertical-align: top;
}
</style>